<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>WT & SWX</title>
</head>
<style>
    h1 {
        color: cornflowerblue;
    }

    body {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
        background: #efb3d5;
    }

    .container {
        position: relative;
        margin-top: 50px;
    }

    .stage {
        position: relative;
        width: 800px;
        height: 240px;
        margin: 20px auto;
        perspective: 2000px;
        transform-style: preserve-3d;
        -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(239, 179, 213, 0.8));
    }

    .stage .control {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
        animation: rotate 30s linear infinite;
    }

    .stage .control .imgWrap {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-style: preserve-3d;
    }

    .stage .control .imgWrap .img {
        position: absolute;
        width: 500px;
        height: 400px;
        line-height: 400px;
        text-align: center;
        font-size: 120px;
        top: 0;
        left: 0;
        object-fit: cover;
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0px;
    }

    .stage .control .imgWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

    .stage .control .imgWrap .img1 {
        transform: rotateY(80deg) translateZ(650px);
    }

    .stage .control .imgWrap .img2 {
        transform: rotateY(125deg) translateZ(650px);
    }

    .stage .control .imgWrap .img3 {
        transform: rotateY(170deg) translateZ(650px);
    }

    .stage .control .imgWrap .img4 {
        transform: rotateY(215deg) translateZ(650px);
    }

    .stage .control .imgWrap .img5 {
        transform: rotateY(260deg) translateZ(650px);
    }

    .stage .control .imgWrap .img6 {
        transform: rotateY(305deg) translateZ(650px);
    }

    .stage .control .imgWrap .img7 {
        transform: rotateY(350deg) translateZ(650px);
    }

    .stage .control .imgWrap .img8 {
        transform: rotateY(395deg) translateZ(650px);
    }

    @keyframes rotate {
        0% {
            transform: translateZ(-2000px) rotateY(0deg);
        }

        35% {
            transform: translateZ(-2000px) rotateY(-250deg);
        }

        70% {
            transform: translateZ(-2000px) rotateY(-500deg);
        }

        100% {
            transform: translateZ(-2000px) rotateY(-720deg);
        }
    }
</style>

<body>
<h1>WT</h1>

<div class="container">
    <div class="stage">
        <div class="control">
            <div class="imgWrap">
                <div class="img img1">
                    <img src="https://www.helloimg.com/i/2025/01/06/677b6ce67787b.jpg">
                </div>
                <div class="img img2">
                    <img src="https://www.helloimg.com/i/2025/01/06/677b6ce588d0e.jpg">
                </div>
                <div class="img img3">
<!--                    <img src="https://www.helloimg.com/i/2025/01/06/677b6ce42b483.jpg">-->
<!--                    <img src="https://www.helloimg.com/i/2025/01/06/677b717c385c5.jpg">-->
                    <img src="https://www.helloimg.com/i/2025/01/06/677b72329527c.jpg">
                </div>
                <div class="img img4">
                    <img src="https://www.helloimg.com/i/2025/01/06/677b6ce372704.jpg">
                </div>
                <div class="img img5">
                    <img src="https://www.helloimg.com/i/2025/01/06/677b6ce1bac3a.jpg">
                </div>
                <div class="img img6">
                    <img src="https://www.helloimg.com/i/2025/01/06/677b6ce157fbc.jpg">
                </div>
                <div class="img img7">
                    <img src="https://www.helloimg.com/i/2025/01/06/677b6cdf1c995.jpg">
                </div>
                <div class="img img8">
                    <img src="https://www.helloimg.com/i/2025/01/06/677b6cdf1bb24.jpg">
                </div>
            </div>
        </div>
    </div>

</div>


<h1>SWX</h1>

</body>
<script></script>

</html>
